<template>
  <div class="comment">
    <div class="overview">
      用户评价({{ totle }})
    </div>
    <div class="rate">
      <div class="score">
        <div class="score-hd">
          <span class="num">{{ score }}</span>
          <span class="cent">分</span>
        </div>
        <div class="txt">{{ satisfaction }}满意</div>
      </div>
      <div class="rating-tag">
        <span class="item">套餐评价({{ 190 }})</span>
        <span class="item">有图点评({{ 45 }})</span>
        <span class="item">印象不错({{ 69 }})</span>
        <span class="item">导游服务好({{ 45 }})</span>
      </div>
      <el-icon style="align-self: center;">
        <ArrowRight />
      </el-icon>
    </div>
    <div class="rating-bd">
      <div class="user">
        <div class="img"
          style="background-image: url('https://img1.qunarzz.com/ucenter/headshot/1806/91/ac986a71660b39ba.png_r_150x150_d16ca618.png');">
        </div>
        <div class="user-detail">
          <div class="name">{{ name }}</div>
          <div class="date">
            {{ travelTime }}出行，{{ createTime }}发表
          </div>
        </div>
      </div>
      <div class="text">
        {{ comment }}
      </div>
    </div>
  </div>
</template>
<script>
import { ArrowRight } from '@element-plus/icons-vue'
export default {
  name: 'UserComment',
  setup() {
    const comment = `未见到蜜月布置，后续反馈意见 结果就是仅仅说给酒店备注，
    也没有解决办法，无旅拍（赠送的旅拍在下单前丝毫没有提醒说需要预约 ，
    如果选择这家需要旅拍 切记预约）私家团导游兼司机也是会迟到的，
    司机到的早也会催的，平台解决问题态度差，并且极其不专业`;
    const travelTime = "2021-12-17";
    const createTime = "2021-12-27";
    const name = "k****3";
    const score = "10";
    const totle = "190";
    const satisfaction = "99%";

    return {
      ArrowRight,
      travelTime,
      createTime,
      comment,
      name,
      score,
      totle,
      satisfaction
    }
  }
}
</script>
<style scoped>
.comment {
  padding-bottom: 70px;
  background-color: white;
}

.overview {
  color: #212121;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
  margin-left: 18px;
  margin-top: 2px;
  text-align: left;
}

.rate {
  display: flex;
  padding: 0 15px;
}

.score {
  background: rgba(21, 229, 255, .05);
  border-radius: 4px;
  color: #00bcd4;
  margin-right: 16px;
  text-align: center;
  width: 74px;
}

.score-hd {
  background: rgba(21, 229, 255, .05);
  border-radius: 4px;
  color: #00bcd4;
  margin-right: 16px;
  text-align: center;
  width: 74px;
}

.txt {
  background: rgba(21, 229, 255, .06);
  color: #00bcd4;
  font-size: 12px;
}

.num {
  font-size: 30px;
  font-weight: 700;
  line-height: 49px;
}

.cent {
  font-size: 13px;
  font-weight: 500;
}

.item {
  background: #f5f5f5;
  border-radius: 11px;
  color: #212121;
  display: inline-block;
  font-size: 13px;
  line-height: 22px;
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 0 6px;
  vertical-align: middle;
}

.rating-tag {
  align-items: center;
  padding-top: 5px;
}

.rating-bd {
  margin-top: 10px;
  overflow: hidden;
  padding-left: 18px;
  padding-right: 16px;
  padding-top: 10px;
}

.user {
  display: flex;
}

.img {
  width: 30px;
  height: 30px;
  background-size: contain;
}

.user-detail {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  text-align: left;
  color: rgb(158, 158, 158);
}

.text {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #212121;
  display: -webkit-box;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  margin-top: 15px;
  text-align: left;
}
</style>